<template>
  <div class="recommend">
    <!-- @scroll="loadMore($event)" -->
    <NavBar></NavBar>
    <Swiper></Swiper>
    <!-- <div class="swiperBox">
      
    </div> -->
    <ContentTitle>热门推荐</ContentTitle>
    <RecmList :recomList="recomList"></RecmList>

    <ContentTitle>MV推荐</ContentTitle>
    <RecmList :recomList="mvList"></RecmList>

    <ContentTitle>最新音乐</ContentTitle>
    <template v-if="newList.length>0">
      <div @click="jumpSongs(item.id)" class="box" v-for="item in newList" :key="item.id">
        <MusicList :musicList="item"></MusicList>
      </div>
    </template>
    <MusicLoading v-else></MusicLoading>
    <div v-show="addPage.length>0" ref="more" class="more">{{page>=newAllList.length/pageSize?"我是有底线的(●'◡'●)":"点击加载更多"}}</div>
  </div>
</template>
<style lang="less" scoped>
.box {
  padding-bottom: 20px;
  position: relative;
  padding-left: 10px;
}
.more {
  text-align: center;
  line-height: 40px;
  font-size: 13px;
  color: #666;
}
</style>
<script>
import ContentTitle from '@/components/ContentTitle.vue';
import RecmList from '@/components/RecmList.vue';
import MusicList from '@/components/MusicList.vue';
import Swiper from '@/components/Swiper.vue';
import MusicLoading from '@/components/MusicLoading';
import { mapState, mapMutations } from 'vuex';
export default {
  created() {
    this.getRecomMusci();
    this.getNewMusci();
    this.$store.dispatch('getAlbum');
    this.getRecomMV();
  },
  beforeRouteEnter(to, from, next) {
    //进入路由的时候，绑定滚动事件.
    next(vm => {
      window.addEventListener('scroll', vm.loadMore);
    });
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('scroll', this.loadMore); //离开当前路由移除scroll事件
    next();
  },
  computed: {
    addPage() {
      return this.newList.slice(0, this.pageSize * this.page);
    },
    ...mapState(['loading'])
  },
  name: 'Recommend',
  data() {
    return {
      mvList: [],
      recomList: [],
      newList: [],
      newAllList: [],
      page: 1,
      pageSize: 5
    };
  },
  components: {
    ContentTitle,
    RecmList,
    MusicList,
    Swiper,
    MusicLoading
  },
  methods: {
    // loadMore() {
    //   if (this.page >= this.newAllList.length / this.pageSize) {
    //     alert('没有更多了');
    //     return;
    //   }
    //   // this.showSong.length=0;
    //   this.page++; //下一页
    //   this.newList = this.newAllList.slice(0, this.pageSize * this.page);
    // },
    loadMore() {
      let el = document.documentElement || document.body;
      let top = el.scrollTop + el.clientHeight;
      let moretop = this.$refs.more.offsetTop;
      var that = this;
      setTimeout(function () {
        if (top >= moretop + 40) {
          if (that.page >= that.newAllList.length / that.pageSize) {
            return;
          }
          // this.showSong.length=0;
          that.page++; //下一页
          that.newList = that.newAllList.slice(0, that.pageSize * that.page);
        }
      }, 1000);
      // if (this.page >= this.newAllList.length / this.pageSize) {
      //   alert('没有更多了');
      //   return;
      // }
      // // this.showSong.length=0;
      // this.page++; //下一页
      // this.newList = this.newAllList.slice(0, this.pageSize * this.page);
    },
    async getRecomMusci() {
      const {
        data: { result: result }
      } = await this.$http.get('/personalized?limit=6');
      // const res = await this.$http.get('/personalized?limit=6');
      this.recomList = result;
    },
    async getRecomMV() {
      // const {
      //   data: { result: result }
      // }
      let {
        data: { data: result }
      } = await this.$http.get('/mv/first?limit=6');
      // const res = await this.$http.get('/personalized?limit=6');
      // console.log('result', result);
      result = result.map(val => {
        return (val = {
          mv: true,
          picUrl: val.cover,
          id: val.id,
          playCount: val.playCount,
          name: val.name
        });
      });

      this.mvList = result;
    },
    async getNewMusci() {
      const {
        data: { result: result }
      } = await this.$http.get('/personalized/newsong');
      this.newAllList = result;
      this.$store.commit('getSwiperPic', this.newAllList);
      this.newList = this.newAllList.slice(0, this.pageSize * this.page);
    },
    jumpSongs(ids) {
      let currentSongIndex = this.newAllList.findIndex(val => {
        return val.id == ids;
      });
      let currentObj = { currentSongIndex: currentSongIndex, newAllList: this.newAllList };
      //显示播放器
      this.$store.commit('showPlayBox', true);
      this.$store.commit('setSongsObject', currentObj);
    }
  }
};
</script>
<style lang="less">
.swiperBox {
  position: relative;
}
.recommend {
  padding-bottom: 70px;
}
</style>
